<template>

<p>count:{{ count }}</p>
<p>obj:{{ obj.name }}</p>   
<p> countAddFive:{{ countAddFive }}</p>
<p><button @click="countAddBut">++</button></p>
<p><button @click="UpdateObjName1">你叫Tom</button></p>
<p><button @click="UpdateObjName2">你叫Jerry</button></p>
<img  :src="SR" width="900px">
</template>

<script setup>
import {ref,reactive,computed,watch} from 'vue'
import PNG from './images/OIP-7.jpg'
const count = ref(0);
const obj = reactive({
    name:"Jerry",
    age:12
})
const countAddFive = computed(()=>{
    return count.value+5;
})
const SR=ref("");
function countAddBut(){
    count.value++;
    if(count.value>=6){
         SR.value=PNG;
}
}

function UpdateObjName1(){
    obj.name="Tom";
}
function UpdateObjName2(){
    obj.name="Jerry";
}

watch(count,(newVal,oldVal)=>{
    console.log("count改变了");
    console.log('new',newVal);
    console.log('old',oldVal);
})

watch(obj,(newVal,oldVal)=>{
    console.log("obj改变了");
    console.log('new',newVal);
    console.log('old',oldVal);
})
watch(()=>obj.name,(newVal,oldVal)=>{
    console.log("obj的name改变了");
    console.log('new',newVal);
    console.log('old',oldVal);
})

</script>